<template>
  <div>
    <!--表格-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20">
          <el-input v-model="inputText" placeholder="请输入 用户名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20">
          <el-input v-model="inputText" placeholder="请输入 用户登录名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20">
          <el-input v-model="inputText" placeholder="请输入 用户名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20" v-show="formSearch.state">
          <el-input v-model="inputText" placeholder="请输入 用户登录名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20" v-show="formSearch.state">
          <el-input v-model="inputText" placeholder="请输入 用户名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20" v-show="formSearch.state">
          <el-input v-model="inputText" placeholder="请输入 用户登录名称"></el-input>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="mb-20">
          <el-button type="primary">检 索</el-button>
          <el-button>重 置</el-button>
          <el-link
            class="ml-10"
            icon="el-icon-plus"
            v-show="!formSearch.state"
            @click="formSearch.state=true"
          >展开</el-link>
          <el-link
            class="ml-10"
            icon="el-icon-minus"
            v-show="formSearch.state"
            @click="formSearch.state=false"
          >收起</el-link>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="pb-20">
          <el-button type="primary" @click="dialogVisible=true">新 建</el-button>
          <el-button type="danger" plain @click="remove">批量删除</el-button>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-20 text-right">
          <el-button icon="el-icon-document">导 出 Excel</el-button>
          <el-button icon="el-icon-printer">打 印</el-button>
        </el-col>
      </el-row>
      <!--表格控件  style="height:calc(100vh - 340px)"  height="100%" -->
      <div>
        <el-table :data="tableData" border>
          <el-table-column type="index" width="50px"></el-table-column>
          <el-table-column type="selection" width="50px"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="操作" fixed="right" width="160px">
            <template slot-scope>
              <div>
                <el-button type="primary" @click="dialogVisible=true">编 辑</el-button>
                <el-button type="danger" plain @click="remove">删 除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页控件-->
      <div class="pt-20 text-center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[20, 100, 500, 1000]"
          :page-size="20"
          layout="prev, pager, next, total, sizes"
          :total="100"
        ></el-pagination>
      </div>
    </el-card>
    <!--表单-->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      center
      top="5vh"
      width="600px"
      class="hzy-w90"
    >
      <el-form label-position="top" :model="formLabelAlign">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="grid" :lg="grid" :xl="grid">
            <el-form-item label="名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="grid" :lg="grid" :xl="grid">
            <el-form-item label="活动区域">
              <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="grid" :lg="grid" :xl="grid">
            <el-form-item label="活动形式">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Curd",
  data() {
    return {
      currentPage4: 1,
      dialogVisible: false,
      msg: "我是Curd",
      tableData: [],
      inputText: "",
      formSearch: {
        state: false
      },
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      grid: 12
    };
  },
  mounted() {
    for (var i = 0; i < 20; i++) {
      this.tableData.push({
        date: "2016-05-0" + i,
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄"
      });
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    remove() {
      global.tools.confirm("确定要删除吗?", () => {
        global.tools.msg("删除成功!", "成功");
        global.tools.alert("确定删除成功了吗？", () => {
          global.tools.notice("其实你没有删除成功", "错误");
        });
      });
    }
  }
};
</script>

